<script lang="ts" setup>
import { onMounted, ref, onUnmounted, getCurrentInstance } from 'vue';
import axios from "axios";
import { ElMessage } from 'element-plus'
import { Apple, ChromeFilled, ElementPlus } from "@element-plus/icons-vue";

// 引入全局函数
const instance = getCurrentInstance();
const myFunction = instance?.appContext.config.globalProperties.$myGlobalFunction;
myFunction();

const gongzhonghao = '/qrcode/gongzhonghao.jpg';// 公众号二维码
const customerServiceWechat = '/qrcode/customer_service_wechat.jpg';// 客服微信

const webList = ref([]);
const getFooterList = () => {
  axios.get( '/api/website/footer' ).then( res => {
    if( res.data.code === 200 ) {
      webList.value = res.data.data;
    } else {
      ElMessage.error( res.data.msg );
    }
  } ).catch( err => {
    console.log( err );
  } );
}

// 获取网站配置
const config = ref( {
  title : '',  // 网站标题
  description : '',// 网站描述
  keywords : '',// 网站关键字
  website_name : '',// 网站名称
  copyright : '',// 版权信息
  icp : '',// ICP备案信息
  beian : '',// 备案信息
  logo : '',// 网站logo
  favicon : '',// 网站favicon
  isp : '',// 备案信息
  xukezheng : '',// 许可证号
  dengjihao : '',// 登记号
  dianhua : '',// 电话
  qq : '',// QQ
  email : '',// 微信
  work_time: '', // 上班时间
} );
const getWebsiteConfig = () => {
  axios.get( '/api/website' ).then( res => {
    if( res.data.code === 200 ) {
      config.value = res.data.data;
    } else {
      ElMessage.error( res.data.msg );
    }
  } ).catch( err => {
    console.log( err );
  } );
}

// 监听窗口大小
const windowWidth = ref( window.innerWidth );
const handleResize = () => {
  windowWidth.value = window.innerWidth;
};
onUnmounted( () => {
  window.removeEventListener( 'resize', handleResize );
} );
onMounted( () => {
  window.addEventListener( 'resize', handleResize );
  getWebsiteConfig();
  getFooterList();
} );

</script>

<template>
  <div class="footer-border margin-top-10 padding-20-10">
    <el-row :gutter="10">
      <el-col :span="8">
        <div class="font-size-18 line-height-40">{{ config.website_name }}</div>
        <div class="font-size-14 line-height-30">{{ config.copyright }}</div>
        <div class="font-size-12 line-height-30">{{ config.dengjihao }}</div>
        <div class="cursor-pointer line-height-30 ">
          <el-space :direction="'horizontal'" :size="'large'">
            <el-icon :size="30"><ChromeFilled /></el-icon>
            <el-icon :size="30"><ElementPlus /></el-icon>
            <el-icon :size="30"><Apple /></el-icon>
          </el-space>
        </div>
        <div class="font-size-14 line-height-30">
          <div>{{ config.icp }} | {{ config.beian }}</div>
          <div>{{ config.isp }}</div>
          <div>{{ config.xukezheng }}</div>
        </div>
      </el-col>
      <el-col :span="4">
        <el-row :gutter="10">
          <el-col :span="12">
            <div><el-image :src="gongzhonghao" style="height: 100px;"></el-image></div>
            <div class="text-center">微信公众号</div>
          </el-col>
          <el-col :span="12">
            <div><el-image :src="customerServiceWechat" style="height: 100px;"></el-image></div>
            <div class="text-center">客服微信</div>
          </el-col>
          <el-col :span="24" class="text-left line-height-30">
            <div class="padding-left-10 margin-top-10">
              <span class="iconfont font-size-20 icon-dianhua"></span>&nbsp;&nbsp;{{ config.dianhua }}
            </div>
            <div class="padding-left-10">
              <span class="iconfont font-size-20 icon-qq"></span>&nbsp;&nbsp;{{ config.qq }}
            </div>
            <div class="padding-left-10">
              <span class="iconfont font-size-20 icon-youxiang"></span>&nbsp;&nbsp;{{ config.email }}
            </div>
            <div class="padding-left-10">
              <span class="iconfont font-size-20 icon-zixun"></span>&nbsp;&nbsp;{{ config.work_time }}
            </div>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="12">
        <el-row :gutter="20">
          <template v-for="(item, index) in webList" :key="index">
            <el-col :span="8">
              <div class="font-size-16 line-height-40 text-center">
                <el-link :href="item.path">{{ item.title }}</el-link>
              </div>
              <div class="font-size-14 line-height-30 text-center" v-for="(val, key) in item.list" :key="key">
                <el-link :href="val.path">{{ val.title }}</el-link>
              </div>
            </el-col>
          </template>
        </el-row>
      </el-col>
    </el-row>
  </div>

</template>

<style scoped>
  .footer-border {
    border-top: 1px solid var(--el-menu-border-color);
  }
</style>